diff options
Diffstat (limited to 'app/[lng]/partners/(partners)/swp-document-upload/vendor-document-page.tsx')
| -rw-r--r-- | app/[lng]/partners/(partners)/swp-document-upload/vendor-document-page.tsx | 230 |
1 files changed, 230 insertions, 0 deletions
diff --git a/app/[lng]/partners/(partners)/swp-document-upload/vendor-document-page.tsx b/app/[lng]/partners/(partners)/swp-document-upload/vendor-document-page.tsx new file mode 100644 index 00000000..f2469c29 --- /dev/null +++ b/app/[lng]/partners/(partners)/swp-document-upload/vendor-document-page.tsx @@ -0,0 +1,230 @@ +"use client"; + +import { useState, useEffect, useTransition } from "react"; +import { useRouter, useSearchParams } from "next/navigation"; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; +import { Alert, AlertDescription } from "@/components/ui/alert"; +import { Skeleton } from "@/components/ui/skeleton"; +import { InfoIcon } from "lucide-react"; +import { SwpTable } from "@/lib/swp/table/swp-table"; +import { SwpTableToolbar } from "@/lib/swp/table/swp-table-toolbar"; +import { + fetchVendorDocuments, + fetchVendorProjects, + fetchVendorSwpStats, + type SwpTableFilters, + type SwpDocumentWithStats, +} from "@/lib/swp/vendor-actions"; + +interface VendorDocumentPageProps { + searchParams: { [key: string]: string | string[] | undefined }; +} + +export default function VendorDocumentPage({ searchParams }: VendorDocumentPageProps) { + const router = useRouter(); + const params = useSearchParams(); + const [isPending, startTransition] = useTransition(); + + // URL에서 필터 파라미터 추출 (vndrCd는 제외 - 서버에서 자동 설정) + const initialFilters: SwpTableFilters = { + projNo: (searchParams.projNo as string) || "", + docNo: (searchParams.docNo as string) || "", + docTitle: (searchParams.docTitle as string) || "", + pkgNo: (searchParams.pkgNo as string) || "", + stage: (searchParams.stage as string) || "", + }; + + const initialPage = parseInt((searchParams.page as string) || "1", 10); + const initialPageSize = parseInt((searchParams.pageSize as string) || "100", 10); + + // 상태 관리 + const [documents, setDocuments] = useState<SwpDocumentWithStats[]>([]); + const [total, setTotal] = useState(0); + const [page, setPage] = useState(initialPage); + const [pageSize] = useState(initialPageSize); + const [totalPages, setTotalPages] = useState(0); + const [filters, setFilters] = useState<SwpTableFilters>(initialFilters); + const [projects, setProjects] = useState<Array<{ PROJ_NO: string; PROJ_NM: string }>>([]); + const [stats, setStats] = useState({ + total_documents: 0, + total_revisions: 0, + total_files: 0, + uploaded_files: 0, + last_sync: null as Date | null, + }); + const [isLoading, setIsLoading] = useState(true); + const [error, setError] = useState<string | null>(null); + + // 초기 데이터 로드 + useEffect(() => { + loadInitialData(); + }, []); + + // 필터 변경 시 데이터 재로드 + useEffect(() => { + if (!isLoading) { + loadDocuments(); + } + }, [filters, page]); + + const loadInitialData = async () => { + try { + setIsLoading(true); + setError(null); + + // 병렬로 데이터 로드 + const [projectsData, statsData, documentsData] = await Promise.all([ + fetchVendorProjects(), + fetchVendorSwpStats(), + fetchVendorDocuments({ + page, + pageSize, + filters: Object.keys(initialFilters).length > 0 ? initialFilters : undefined, + }), + ]); + + setProjects(projectsData); + setStats(statsData); + setDocuments(documentsData.data); + setTotal(documentsData.total); + setTotalPages(documentsData.totalPages); + } catch (err) { + console.error("초기 데이터 로드 실패:", err); + setError(err instanceof Error ? err.message : "데이터 로드 실패"); + } finally { + setIsLoading(false); + } + }; + + const loadDocuments = async () => { + startTransition(async () => { + try { + const data = await fetchVendorDocuments({ + page, + pageSize, + filters: Object.keys(filters).some((key) => filters[key as keyof SwpTableFilters]) + ? filters + : undefined, + }); + + setDocuments(data.data); + setTotal(data.total); + setTotalPages(data.totalPages); + + // URL 업데이트 + const params = new URLSearchParams(); + if (filters.projNo) params.set("projNo", filters.projNo); + if (filters.docNo) params.set("docNo", filters.docNo); + if (filters.docTitle) params.set("docTitle", filters.docTitle); + if (filters.pkgNo) params.set("pkgNo", filters.pkgNo); + if (filters.stage) params.set("stage", filters.stage); + if (page !== 1) params.set("page", page.toString()); + + router.push(`?${params.toString()}`, { scroll: false }); + } catch (err) { + console.error("문서 로드 실패:", err); + setError(err instanceof Error ? err.message : "문서 로드 실패"); + } + }); + }; + + const handleFiltersChange = (newFilters: SwpTableFilters) => { + setFilters(newFilters); + setPage(1); // 필터 변경 시 첫 페이지로 + }; + + const handlePageChange = (newPage: number) => { + setPage(newPage); + }; + + if (isLoading) { + return ( + <Card> + <CardHeader> + <Skeleton className="h-8 w-48" /> + <Skeleton className="h-4 w-96" /> + </CardHeader> + <CardContent className="space-y-4"> + <Skeleton className="h-32 w-full" /> + <Skeleton className="h-96 w-full" /> + </CardContent> + </Card> + ); + } + + if (error) { + return ( + <Alert variant="destructive"> + <AlertDescription>{error}</AlertDescription> + </Alert> + ); + } + + return ( + <div className="space-y-6"> + {/* 통계 카드 */} + <div className="grid grid-cols-1 md:grid-cols-4 gap-4"> + <Card> + <CardHeader className="pb-3"> + <CardDescription>할당된 문서</CardDescription> + <CardTitle className="text-3xl">{stats.total_documents.toLocaleString()}</CardTitle> + </CardHeader> + </Card> + <Card> + <CardHeader className="pb-3"> + <CardDescription>총 리비전</CardDescription> + <CardTitle className="text-3xl">{stats.total_revisions.toLocaleString()}</CardTitle> + </CardHeader> + </Card> + <Card> + <CardHeader className="pb-3"> + <CardDescription>총 파일</CardDescription> + <CardTitle className="text-3xl">{stats.total_files.toLocaleString()}</CardTitle> + </CardHeader> + </Card> + <Card> + <CardHeader className="pb-3"> + <CardDescription>업로드한 파일</CardDescription> + <CardTitle className="text-3xl text-green-600"> + {stats.uploaded_files.toLocaleString()} + </CardTitle> + </CardHeader> + </Card> + </div> + + {/* 안내 메시지 */} + {documents.length === 0 && !filters.projNo && ( + <Alert> + <InfoIcon className="h-4 w-4" /> + <AlertDescription> + 프로젝트를 선택하여 할당된 문서를 확인하세요. + </AlertDescription> + </Alert> + )} + + {/* 메인 테이블 */} + <Card> + <CardHeader> + <SwpTableToolbar + filters={filters} + onFiltersChange={handleFiltersChange} + projects={projects} + mode="vendor" + /> + </CardHeader> + <CardContent> + <SwpTable + initialData={documents} + total={total} + page={page} + pageSize={pageSize} + totalPages={totalPages} + onPageChange={handlePageChange} + mode="vendor" + /> + </CardContent> + </Card> + </div> + ); +} + |